<template>
  <!-- {{  props.barcodeList }} -->
  <div class="print-show">
    <!-- <el-button type="warning" @click="handlePrint">printJs打印</el-button> -->
    <div ref="print" id="barcode" style="width: 450px; height: 450px; margin: 0 auto; ">
      <div v-for="(item, index) in props.barcodeList" :key="index" style="page-break-after: always;  width: 100%;height: 100%;display: flex; justify-content: center; align-items: center">
        <div class="tableBox" style="display: flex; justify-content: center; align-items: center;padding: 0 30px;" >
          <table style="border-collapse: collapse;" >
            <tr>
              <td style="height:40px;border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" rowspan="2" colspan="2">
                <div class="imgBox" style="width: 90%;margin: 0 auto; "><img style="width: 100%;" :src="item.box_url" /></div>
              </td>
              <td style="height:40px;border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="2">条码 :</td>
              <td style="height:40px;border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="4">{{ item.lot_num }}</td>
            </tr>
            <tr>
              <td style="height:40px;border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="2">汇报单号 :</td>
              <td style="height:40px;border: solid 1px #000; text-align: center; padding: 5px 3px" colspan="4">{{ item.order.docno }}</td>
            </tr>
            <tr>
              <td style="height:40px;border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="2">工单号：</td>
              <td style="height:40px;border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="4">{{ item.order.production_no }}</td>
              <td style="height:40px;border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="2">数量 : {{ item.make_qty }}</td>
            </tr>
            <tr>
              <td style="height:40px;border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="2">品号：</td>
              <td style="height:40px;border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="6">{{ item.material.fnumber }}</td>
            </tr>
            <tr>
              <td style="height: 50px; border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="2">品名：</td>
              <td style="height:40px;border: solid 1px #000; text-align: center; padding: 5px 3px;" colspan="6">{{ item.material.fname }}</td>
            </tr>
            <tr>
              <td style="height:40px;border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="2">本箱数量：</td>
              <td style="height:40px;border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="3">{{ item.number }}</td>
              <td style="height:40px;border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">个</td>
              <td style="height:40px;width: 10px; border: solid 1px #000; text-align: center; padding: 5px 3px" rowspan="3">物料条码</td>
              <td style="height:40px; border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" rowspan="3">
                <div class="imgBox" style="width: 80%; margin: 0 auto"><img  style="width: 100%;"  :src="item.material_url" /></div>
              </td>
            </tr>
            <tr>
              <td style="height:40px;border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="2">生产日期：</td>
              <td style="height:40px;border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="4">{{ item.material.created_at }}</td>
            </tr>
            <tr>
              <td style="height:40px;border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="2">有效期：</td>
              <td style="height:40px;border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="4"></td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

 
<script lang="ts" setup>
import { ref, watchEffect } from 'vue'
// import { getLodop } from '/admin/utils/LodopFuncs'
import printJS from 'print-js'
import { PDFDocument, rgb } from 'pdf-lib'
import Vue from 'vue'
import VueToPdf from 'vue-to-pdf'
import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'
// 使用pdf-lib的代码...
const props = defineProps({
  barcodeList: Array,
  PrintNow: Boolean,
  output: Boolean,
})

// console.log('打印页面', props.printingArr)
console.log('接受打印数据', props.barcodeList)
const print = ref()
const content = ref(null)

let emit = defineEmits(['send-data'])

watchEffect(() => {
  if (props.PrintNow == true) {
    console.log('触发更新：', props.PrintNow)
    triggerEvent()
    emit('send-data')
  }
  if (props.output == true) {
    console.log('触发导出：', props.output)
    // triggerOutput()
    triggerEvent()
    emit('send-data')

    // exportToPDF()
  }
})

let triggerEvent = () => {
  printJS({
    printable: 'barcode', // 要打印的元素的ID或HTML字符串
    type: 'html', // 打印内容的类型，可以是'html'、'image'、'pdf'等
    targetStyle: ['*'],
    scanStyles: false,
    css: `
    @page {
      size: 100mm 100mm;
    }
  `,
  })
}

let exportToPDF = () => {
  let htmlNode = document.getElementById('barcode')
  html2canvas(htmlNode).then(function (canvas) {
    var imgData = canvas.toDataURL('image/png')
    var pdf = new jsPDF('p', 'mm', [200, 200])
    pdf.addImage(imgData, 'PNG', 0, 0)
    pdf.save('table.pdf')
  })
}
</script>

<style lang="css" scoped>
.print-show {
  border: 1px solid #ccc;
  box-shadow: 2px 3px 10px #ccc;
  border-radius: 10px;
  width: 100%;
  height: 60vh;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #ccc;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 5px;
}

.bordered-table {
  border-collapse: collapse;
}
</style>

